<template>
  <u-modal :show="show" title="选择报工信息" showCancelButton @confirm="confirm" @cancel="cancel">
    <view class="slot-content">
      <u--form :model="bind" ref="uForm" labelWidth="280rpx" labelAlign="left">
        <u-form-item label="站点:" prop="stationName" class="u-border-bottom">
          <!-- <u--input v-model="station.stationName" type="text" disabled disabledColor="#ffffff" placeholder="请选择站点" border="none"></u--input> -->
		  <!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
		  <u--text type="success" :text="station.stationName"></u--text>
        </u-form-item>
		 <u-row customStyle="margin-bottom: 10px">
			<u-col span="6">
				<view class="demo-layout bg-purple">成品名称</view>
			</u-col>
			<u-col span="3">
				<view class="demo-layout bg-purple">良品数</view>
			</u-col>
			<u-col span="3">
				<view class="demo-layout bg-purple">不合格数</view>
			</u-col>
		</u-row>
		<view class="scroll-container">
			<!-- List -->
			<u-form-item v-for="(item, index) in preSubmitList" 
				:label="`${index+1}｜${item.bomName}:${item.bomStandard}`" 
				class="u-border-bottom" >
				<u--text type="error" :text="item.todayCompletionReq"></u--text>
				<u--text type="error" :text="item.ungoodNumReq"></u--text>
			</u-form-item>
		</view>
		
        <u-form-item label="预报工总数:" prop="total" class="u-border-bottom">
          <u--text type="error" :text="total"></u--text>
          <u--text type="error" :text="ungoodTotal"></u--text>
        </u-form-item>
        <u-form-item label="当日生产异常:" prop="errMessage" class="u-border-bottom">
          <u--input v-model="bind.errMessage" type="errMessage" placeholder="请输入当日生产异常" border="none"></u--input>
        </u-form-item>
      </u--form>
	  
	  <u-picker 
		  :show="stationShow" 
		  keyName="label" 
		  :columns="stationList" 
		  :defaultIndex="defaultIndex"
		  @cancel="stationShow = false" 
		  @confirm="stationConfirm">
	  </u-picker>
	  
	  <u-toast ref="uToast" />
    </view>
  </u-modal>
</template>

<script>
import * as BaseApi from '@/api/base/base';
import storage from '@/utils/storage';
export default {
  props: {
    show: Boolean,
	total: {
		type: Number,
		default: 0,
	},
	ungoodTotal: {
		type: Number,
		default: 0,
	},
	preSubmitList: {
		type: Array,
		default: [],
	},
	station: {
		type: Object,
		default () {
			return {}
		}
	},
  },
  data () {
    return {
      bind: {
        stationId: '',
		stationName: '',
		errMessage: '',
      },
	  defaultIndex: [0],
	  stationShow: false,
	  shiftShow: false,
	  stationList: [],
	  shiftList: [[
		  {label: '白班', id: 1}, 
		  {label: '晚班', id: 2},
		]],
    }
  },
  created() {
	this.init();
  },
  methods: {
	init() {
		// TODO 初始化重新绑定分厂班组的列表信息
		// BaseApi.getStationList().then(res => {
		// 	  console.log("站点列表:", res);
		// 	  if (!res || !res.data || res.data.length == 0) {
		// 		  return;
		// 	  }
		// 	  let result = res.data.map((item) => {
		// 		return {
		// 		  label: item.stationName,
		// 		  id: item.stationId,
		// 		};
		// 	  });
		// 	  Object.assign(this.bind, res.data[0]);
		// 	  this.stationList = [];
		// 	  this.stationList.push(result);
		// });
		// const station = storage.get('STATION_0');
		// if (station) {
		// 	this.bind = station;
		// }
		// this.bind.stationName = this.station.stationName;
	},
    confirm () {
		console.log("参数:", this.total);
		// TODO 确定绑定成功之后再关闭窗口
		if (!this.station.stationId) {
			this.$refs.uToast.error(`站点未选择，不能提交报工`);
			return;
		}
		this.bind.stationId = this.station.stationId;
		this.bind.stationName = this.station.stationName;
		this.$emit('submit', this.bind);
    },
	navigateTo (url) {
	  uni.navigateTo({ url: url })
	},
    cancel () {
      this.$emit('close')
    },
	stationConfirm(e) {
		console.log("站点确认:", e);
		// TODO e.value[0] = 选择的对象
		this.stationShow = false;
		this.station.stationId = e.value[0].id;
		this.station.stationName = e.value[0].label;
	},
  }
}
</script>

<style lang="scss" scoped>
.scroll-container {
  max-height: 300rpx; /* 你可以根据需要调整高度 */
  overflow-y: auto;   /* 使内容超出时出现垂直滚动条 */
  position: relative;  /* 使阴影和伪元素相对容器 */
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2); /* 内阴影 */
}

/* 自定义滚动条 */
.scroll-container::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条颜色 */
  border-radius: 10px;    /* 滚动条圆角 */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 鼠标悬停时滚动条颜色 */
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道颜色 */
  border-radius: 10px; /* 轨道圆角 */
}

/* 添加右侧装饰性滚动条 */
.scroll-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px; /* 装饰性滚动条的宽度 */
  height: 100%; /* 高度与容器一致 */
  background-color: rgba(0, 0, 0, 0.1); /* 装饰性滚动条颜色 */
  border-radius: 2px; /* 圆角 */
}




.cell-page {
	padding-bottom: 20px;
}

.cell-box {
	&__title {
		font-size: 14px;
		color: rgb(143, 156, 162);
		margin: 20px 0px 0px 15px;
	}

	&__block {
		// background-color: #fff;
		margin-top: 20px;
	}
}

.u-page {
	padding: 0;

	&__item {

		&__title {
			color: $u-tips-color;
			background-color: $u-bg-color;
			padding: 15px;
			font-size: 15px;

			&__slot-title {
				color: $u-primary;
				font-size: 14px;
			}
		}
	}
}

.u-slot-title {
	@include flex;
	flex-direction: row;
	align-items: center;
}

.u-cell-text {
	font-size: 15px;
	line-height: 22px;
	color: #303133;
	margin-right: 5px;
}

.u-slot-value {
	line-height: 17px;
	text-align: center;
	font-size: 10px;
	padding: 0 5px;
	height: 17px;
	color: #FFFFFF;
	border-radius: 100px;
	background-color: #f56c6c;
}
.wrap {
	padding: 12px;
}

.demo-layout {
	height: 23px;
	// border-radius: 4px;
	color: #62c188;
}

.bg-purple {
	background: #dbfbdb;
}

</style>